#@adminLayout()
#define main()
<div class="jbolt_page" data-key="#(pmkey)">
    <div class="jbolt_page_content">

        <form class="form" name="update_option"  action="/auth/mall/special_commodity/update_option"   method="post"  onsubmit="return OptionSubmitForm(this)" >
            <div class="col-12" style="margin-inside: 100px">
                <div >
                    <input style="" type="hidden" name="Bec_option.id" type="text" value="#(CommodityOption.id??)">
                    <input style="" type="hidden" name="Bec_option.commodity_id" type="text" value="#(CommodityOption.commodity_id??)">
                </div>
                <div class="row"  style="margin-top:30px"  >
                    <label class="col-4">商品规格:</label>
                    <div class="col-6">
                        <textarea style="width: 200px;height: 120px"  name="Bec_option.title" autocomplete="off" value="">#(CommodityOption.title??)</textarea>
                    </div>

                </div >
                <div class="row" style="margin-top:30px">
                    <label class="col-4">商品原价(元):</label>
                    <div class="col-6">
                        <input type="money" min="0" data-rule="money" autocomplete="off" name="price" type="text" value="#(MyUtil.get_price_string(CommodityOption.price))">

                    </div>
                </div>
                <div class="row" style="margin-top:30px">
                    <label class="col-4">商品特价(元):</label>
                    <div class="col-6">
                        <input type="money" min="0" data-rule="money" autocomplete="off" name="special_price" type="text" value="#(MyUtil.get_price_string(CommodityOption.special_price))">

                    </div>
                </div>
                <div class="row" style="margin-top:30px">
                    <label class="col-4">商品特价库存:</label>
                    <div class="col-6">
                        <input type="number" min="0" data-rule="number" autocomplete="off" name="Bec_option.special_stock" type="text" value="#(CommodityOption.special_stock)">

                    </div>
                </div>
                <div class="row" style="margin-top:30px">
                    <label class="col-4">商品特价折扣:</label>
                    <div class="col-6">
                        <input type="number" min="0" data-rule="number" autocomplete="off" name="Bec_option.discount" type="text" value="#(CommodityOption.discount??)">

                    </div>
                </div>
                <div class="row" style="margin-top:30px">
                    <label class="col-4">分销商积分:</label>
                    <div class="col-6">
                        <input type="number" min="0" data-rule="number" autocomplete="off" name="Bec_option.spreader_credit" type="text" value="#(CommodityOption.spreader_credit??)">

                    </div>
                </div>
                <div class="row" style="margin-top:30px">
                    <label class="col-4">平台抽成:</label>
                    <div class="col-6">
                        <input type="number" min="0" data-rule="number" autocomplete="off" name="Bec_option.platform_commission" type="text" value="#(CommodityOption.platform_commission??)">

                    </div>
                </div>

                <div class="row"  style="margin-top:30px"  >
                    <div class="col-6">
                        <input type="hidden" value="#(CommodityOption.thumb)" id="mainImageInput_#(CommodityOption.id??)"  name="Bec_option.thumb" >
                    </div>
                </div >


                <div class="form-group text-center" style="display: flex;flex-direction: row-reverse;margin-top:20px"  style="margin-top:50px">
                    <button type="submit"  class="btn btn-success" style="width:100px;"  ><i class="fa fa-check mr-2"></i>保存</button>
                </div>
            </div>

        </form >



        <form  onsubmit="return false;"  id="retailerFormImg" action="/auth/mall/special_commodity/update_option_images" method="post">

            <input type="hidden" name="BecOption.id" value="#(CommodityOption.id)" />
            <input type="hidden"  data-rule="required" readonly="readonly" data-tips="请选择图片上传" name="BecOption.thumb" id="imgUploadDemo" value="#(CommodityOption.thumb??)" class="form-control"/>

            <img id="image" tooltip data-title="点击查看大图" src="#realImage(CommodityOption.thumb??,'/assets/img/uploadimg.png')" alt="" style="width: 300px;height: 250px">
        </form>

        <input  type="file" name="image" id="file" accept="image/*" value="选择文件" >

        <div class="form-group text-center">
            <button type="button" onclick="imageload()" id="upload" value="upload" class="btn btn-success" ><i class="fa fa-check mr-2"></i>提交</button>
        </div>

    </div>


</div>
#end

#define js()
<script>
    $(function(){
    });
    var inputBox = document.getElementById("file");
    var img = document.getElementById("image");
    $(function () {
        $("#file").on("change", function ()  {
            var reader = new FileReader();
            reader.readAsDataURL(inputBox.files[0]);//发起异步请求
            reader.onload = function () {
                //读取完成后，将结果赋值给img的src
                img.src = this.result
            }
        })
    })

    //提交表单
    function OptionSubmitForm(formEle,callback){
        var form=getRealJqueryObject(formEle);
        if(isOk(form)){
            if(FormChecker.check(form)){
                var url=form.action;
                form.ajaxSubmit({
                    type:"post",
                    url:url,
                    success:function(ret){
                        if(ret.state=="ok"){
                            if(callback){
                                refreshPjaxContainer();
                                LayerMsgBox.success(ret.msg,500,callback);

                            }else{
                                refreshPjaxContainer();
                                LayerMsgBox.success(ret.msg,500,callback);

                            }

                        }else{
                            LayerMsgBox.alert(ret.msg,2);
                        }
                    }
                });
            }
        }

        return false;

    }

    /**
     * 通过ajax提交form
     * @param formEle
     * @returns
     */
    function SubmitForm(formEle,callback){
        var form=getRealJqueryObject(formEle);
        if(isOk(form)){
            if(FormChecker.check(form)){
                var url=form.action;
                form.ajaxSubmit({
                    type:"post",
                    url:url,
                    success:function(ret){
                        if(ret.state=="ok"){
                            if(callback){
                                LayerMsgBox.success(ret.msg,500,callback);
                            }else{
                                LayerMsgBox.success(ret.msg,500);
                            }
                        }else{
                            LayerMsgBox.alert(ret.msg,2);
                        }
                    }
                });
            }
        }

        return false;

    }


    function imageload() {

        var obj = $("#file");

        var fileName = obj.val();//上传的本地文件绝对路径

        var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);//后缀名
        var file = obj.get(0).files[0];	                                           //上传的文件
        var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size
            / (1024 * 1024)).toFixed(2) + 'MB' : (file.size
            / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';		   //文件上传大小
        //七牛云上传
        $.ajax({
            type:'post',
            url: "/auth/mall/Qn/QiniuUpToken",
            data:{"suffix":suffix},
            dataType:'json',
            success: function(result){

                if(result.success == 1){

                    var observer = {
                        //设置上传过程的监听函数

                        next(result){                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                            Math.floor(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
                        },
                        error(err){
                            alert(2);//失败后
                            alert(err.message);
                        },
                        complete(res){

                            //成功后
                            // ?imageView2/2/h/100：展示缩略图，不加显示原图
                            // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高


                            $("#image").attr("src","http://"+result.domain+"/"+result.imgUrl+"?i");
                            $("#imgUploadDemo").val("http://"+result.domain+"/"+result.imgUrl+"?i");
                            OptionSubmitForm(retailerFormImg);

                        }
                    };
                    var putExtra = {
                        fname: "",                          //原文件名
                        params: {},                         //用来放置自定义变量
                        mimeType: null                      //限制上传文件类型
                    };
                    var config = {
                        region:qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                        concurrentRequestLimit:3            //分片上传的并发请求量
                    };
                    var observable = qiniu.upload(file,result.imgUrl,result.token,putExtra,config);
                    var subscription = observable.subscribe(observer);          // 上传开始
                    // 取消上传
                    // subscription.unsubscribe();



                }else{

                    alert(3);//失败后
                    alert(result.message);                  //获取凭证失败
                }



            },error:function(){                             //服务器响应失败处理函数
                alert("服务器繁忙");
            }
        });

    }
</script>
#end

